<template>
  <!-- 日期时间选择器 -->
  <div class="pho-form-item">
    <van-field
      :value="value"
      :label="showLabel ? $attrs.label : ''"
      :name="$attrs.__vModel__"
      :required="$attrs.required"
      :rules="$attrs.rules"
      input-align="right"
      :disabled="$attrs.disabled"
      :clearable="$attrs.clearable"
      :is-link="!isTop"
      :placeholder="$attrs.placeholder"
      readonly
      @click="onClick"
      @clear.stop
    />

    <DatePicker
      ref="DatePicker"
      :type="$attrs.type"
      :format="$attrs.format"
      @callBack="onConfirm"
    />
  </div>
</template>

<script>
import DatePicker from "./components/datePicker.vue";
export default {
  name: "phone-form-date-picker",
  components: {
    DatePicker,
  },
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    value: {
      type: [String, Array],
      default: "",
    },
    // 是否为上下布局
    isTop: {
      type: Boolean,
      default: false,
    },
    // 是否展示标题
    showLabel: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      formValue: "",
    };
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.formValue = newValue || "";
      },
    },
  },

  methods: {
    onClick() {
      if (this.$attrs.disabled || this.$attrs.readonly) return;
      this.$refs.DatePicker.open(this.formValue);
    },
    onConfirm(val) {
      this.$emit("update", val);
    },
  },
};
</script>

<style lang="scss" scoped></style>
